<template lang="html">
    <div class="teacher-fields">
        <nav-header>
            <template slot="menuBefore">
                <div class="th-title-icon">
                    <el-button
                        @click="fieldsTips = true"
                        icon="el-icon-warning"
                        circle title="提示" size="mini" >
                    </el-button>
                </div>
            </template>
        </nav-header>
        <div class="zh-table">
            <div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width">
                        <el-input placeholder="请输入关键词" v-model="keyword"></el-input>
                    </div>
                    <el-button type="primary" @click="getList">搜索</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="addRow">&nbsp;&nbsp;&nbsp;&nbsp;添加&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
                    <!-- <el-button type="danger" @click="delAllShow">批量删除</el-button> -->
                </div>
            </div>
            <div class="zh-table-contents"  v-loading="loading.status" :element-loading-text="loading.txt">
                <ul class="record-table-head record-table-list">
                    <li style="flex: 0 0 50px;"><el-checkbox v-model="checkAll" @change="handleCheckAllChange"></el-checkbox></li>
                    <li><div class="ellips">字段</div></li>
                    <li><div class="ellips">分类</div></li>
                    <li><div class="ellips">状态</div></li>
                    <li v-show="listData.length > 0"><div>操作</div></li>
                </ul>
                <ul class="record-table-body record-table-list" v-for="(field, fieldInx) in listData">
                    <li style="flex: 0 0 50px;"><el-checkbox  @change="handleCheckedChange(fieldInx, $event)"></el-checkbox></li>
                    <li><div class="ellips" v-text="field.name"></div></li>
                    <li><div class="ellips" v-text="field.is_default === 1 ? '基础信息' : '档案信息'"></div></li>
                    <li>
                        <div class="ellips">
                            <span v-text="field.status ? '启用' : '禁用'"></span>  
                            <el-switch v-if="field.is_default !== 1" v-model="field.status" active-color="#3bb080" inactive-color="#d8d8d8" @change="statusChange(fieldInx,$event)"></el-switch>
                        </div>
                        </li>
                        <li>
                        <div class="ellips">
                            <el-button type="text" @click="fieldEditShow(fieldInx)">编辑</el-button>
                            <!-- <el-button type="text" @click="delCon(fieldInx)">删除</el-button> -->
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <el-dialog
            title="添加"
            :visible.sync="fieldsAdd"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            :before-close="cancel"
            width="30%" >
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="类型" prop="type">
                <span v-text="form.type">档案信息</span>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" maxlength="10" placeholder="10个字符以内"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="2">禁用</el-radio>
                </el-radio-group>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addField">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="编辑"
            :visible.sync="fieldsEdit"
            :close-on-click-modal="false" 
            :close-on-press-escape="false"
            width="30%" >
        <el-form ref="editForm" :model="editForm" :rules="rules" label-width="80px">
            <el-form-item label="名称" prop="name">
            <el-input v-model="editForm.name" maxlength="10" placeholder="10个字符以内"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
            <el-radio-group v-model="editForm.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="fieldsEdit = false">取 消</el-button>
            <el-button type="primary" @click="fieldEdit">确 定</el-button>
        </div>
        </el-dialog>
        <el-dialog
        title="提示"
        :visible.sync="fieldsTips"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="30%"
        >
        <ul>
            <li>基础信息具有唯一性</li>
            <li>档案信息会随着年龄进行调整；亦即是前台教师档案中表格的信息</li>
        </ul>
        <div slot="footer" class="dialog-footer">
        </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'recordManage',
  data() {
    return {
      loading:{
		    status:false,
		    txt:'获取数据...'
		  },
      fieldsAdd: false,
      fieldsEdit: false,
      fieldsTips: false,
      keyword: '',
      form: {
        type: '档案信息',
        name: '',
        status: 1,
      },
      editForm: {
        id: null,
        name: '',
        status: null,
      },
      listData: [],
      rules: {
         name: [
            { required: true, validator: this.validateInput, message: '请填写字段名称(10个字符以内)'},
         ],
         status: [
            { required: true, message: '请选择状态'},
         ]
      },
      delSel: [],
      checkAll: false,
      checks: [],
    }
  },
  mounted() {},
  created() {this.getList()},
  methods: {
        cancel() {
            this.$refs.form.clearValidate();
            this.fieldsAdd = false;
            this.form.name = '';
        },
        validateInput(rule, value, callback){/*校验输入内容是否为空 */
            if ( is_empty(value) ) {
                return callback(new Error('请填写字段名称(10个字符以内)'));
            } else {
                callback()
            }
		},
        getList() {
            this.loading.status = true;
            let params = {
                type: 2,
                status: '1,2',
                keyword: this.keyword,
            }
            const success = res=> {
                this.loading.status = false;
                this.listData = res.data;
                this.listData.forEach(ele=> {
                    ele.status = parseInt(ele.status) === 1 ? true : false;
                })
            }
            this.$ajax.get('api/newarchive/archive_field', { params: params,func: {success: success}})
        },
        statusChange(inx,e) {
            let status = null;
            if(e) {
                status = 1;
            } else {
                status = 2;
            }
            this.putField(this.listData[inx], status)
        },
        putField(obj, status) {
            let params = {
                id: obj.id,
                name: obj.name,
                status: status,
            }
            const success=res=> {
                this.$message.success(res.msg);
                this.checkAll = false;
                this.getList();
                this.removeChecked();
            }
            this.$ajax.put('api/newarchive/archive_field',params,{func:{success:success}})
        },
        fieldEditShow(inx) {
            this.fieldsEdit = true;
            this.editForm.id = this.listData[inx].id;
            this.editForm.name = this.listData[inx].name;
            this.editForm.status = this.listData[inx].status ? 1 : 2;
        },
        fieldEdit() {
            this.$refs[`editForm`].validate(valid => {
                if (valid) {
                    this.fieldsEdit = false;
                    this.putField(this.editForm,this.editForm.status);
                } else {
                return;
                }
            })
        },
        addRow() {
            this.fieldsAdd = true;
        },
        addField() {
            let params = this.form;
            const success = res=>{
                this.fieldsAdd = false;
                this.form.name = '';
                this.form.status = 1;
                this.getList();
            }
            this.$refs[`form`].validate(valid => {
                if (valid) {
                    this.$ajax.post('api/newarchive/archive_field',params,{func:{success:success}})
                } else {
                    return;
                }
            })
        },
        handleCheckAllChange(val) {
            this.checks = [];

            if(val) {
                this.addChecked();
            } else {
                this.removeChecked();
            }
        },
        addChecked() {
            let list = document.querySelectorAll('.record-table-body');

            for(let i=11,len=list.length; i<len; i++) {
                list[i].querySelector('.el-checkbox').classList.add('is-checked');
                list[i].querySelector('.el-checkbox__input').classList.add('is-checked');
                list[i].querySelector('input').checked = true;
                this.checks.push(this.listData[i].id);
            }
        },
        removeChecked() {
            let list = document.querySelectorAll('.record-table-body');

            for(let i=11,len=list.length; i<len; i++) {
                list[i].querySelector('.el-checkbox').classList.remove('is-checked');
                list[i].querySelector('.el-checkbox__input').classList.remove('is-checked');
                list[i].querySelector('input').checked = false;
            }
        },
        handleCheckedChange(val, e) {
            let id = this.listData[val].id;

            if(e) {
                this.checks.push(id);
            } else {
                this.checks.splice( this.checks.indexOf(id), 1);
            }

            this.checkAll = this.checks.length > 0 ? true : false;
        },
        delAllShow() {
            if (this.checks.length > 0) {
                this.$confirm('是否继续删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delSel = this.checks.join(',');

                    let obj = {
                        name: '',
                        id: this.delSel,
                    }
                    this.putField(obj, 0);
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                }); 
            } else {
                this.$message({
                    message: '请选择要删除的项',
                    type: 'warning'
                });
            }
        },
        delCon(inx) {
            this.$confirm('是否继续删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delSel = [this.listData[inx].id];
                let obj = {
                        name: '',
                        id: this.delSel[0],
                    }
                    this.putField(obj,0);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });  
        },
    },
}
</script>

<style lang="scss">
.teacher-fields {
  .th-title-icon {
    position: absolute;
    right: 40px;
  }
  .record-table-head {
    background: #ddd;
    color: #949494;
  }
  .record-table-body {
    max-height: 500px;
    overflow: hidden;
  }
  .record-table-list {
    display: flex;
    li {
      flex: 1;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border-right: 1px dotted #ddd;
      border-bottom: 1px solid #ddd;
      padding: 0 5px;
      overflow: hidden;
      &:first-child {
        // flex: 0 0 50px;
        border-left: 1px solid #ddd;
      }
      &:last-child {
        flex: 0 0 150px;
        border-right: 1px solid #ddd;
      }
    }
  }
}
</style>
